<template>
	<div>
		<zh-space>
			<zh-card title="">
				<zh-form ref="roleQueryFrom" :model="state.queryRoleParam">
					<zh-form-select
						v-model="state.queryRoleParam.searchType"
						label="查询类型"
						:options="state.searchTypeData"
						prop="searchType"
						placeholder="默认查询未添加的角色"
						@change="searchTypeChange"
					>
					</zh-form-select>
					<zh-form-input prop="roleName" label="角色名称" placeholder="支持模糊查询" v-model="state.queryRoleParam.roleName"></zh-form-input>

					<template v-if="state.advanced">
						<zh-form-select
							prop="appId"
							:lazy="true"
							label="所属应用"
							:timeout="20000"
							v-model="state.queryRoleParam.appId"
							:fieldNames="{ label: 'appName', value: 'appId' }"
							funcCode="application0012"
							searchField="appName"
						></zh-form-select>
					</template>
					<zh-form-query :form-ref="roleQueryFrom" :table-ref="roleListTable" v-model="state.advanced"></zh-form-query>
				</zh-form>
			</zh-card>
			<zh-table ref="roleListTable" :rowConfig="{ keyField: 'roleId' }" title="角色列表" :funcCode="state.funcCode" :columns="state.roleColumn">
				<template #status_default="{ row }"> <zh-badge :status="statusMap[row.status].status" :text="statusMap[row.status].text" /> </template
			></zh-table>
		</zh-space>
	</div>
</template>
<script lang="ts" setup name="addRoleModule">
const statusMap = {
	0: {
		status: 'error',
		text: '禁用',
	},
	1: {
		status: 'processing',
		text: '启用',
	},
};
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	id: {
		type: String,
	},
	type: {
		type: String,
	},
});
//------------------定义子组件---------------------------
const roleQueryFrom = ref();
const roleListTable = ref<any>({});
//------------------内部变量定义-------------------------
const state = reactive({
	queryRoleParam: {
		searchType: '1',
		status: '1',
		roleName: null,
		roleTypes: [],
	} as any,
	searchTypeData: [
		{ dictKey: '2', dictValue: '已授权角色' },
		{ dictKey: '1', dictValue: '未授权角色' },
		{ dictKey: '3', dictValue: '全部' },
	],
	dictData: {} as any,
	funcCode: '',
	roleColumn: [
		{ type: 'checkbox', width: 50, fixed: 'left' },
		{ type: 'seq', width: 50, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'roleId', title: '角色Id', visible: false, fixed: 'left', align: 'center', width: 150 },
		{ field: 'roleName', title: '角色名称', align: 'center', fixed: 'left', minWidth: 200 },
		{ field: 'parentId', title: '父角色Id', visible: false, align: 'center', minWidth: 200 },
		{ field: 'roleType', title: '角色类型', visible: false, align: 'center', width: 100 },
		{ field: 'roleTypeName', title: '角色类型', align: 'center', width: 150 },
		{
			field: 'status',
			title: '状态',
			align: 'center',
			width: 80,
			slots: {
				default: 'status_default',
			},
		},
		{ field: 'appId', title: '应用id', visible: false, align: 'center', width: 100 },
		{ field: 'appName', title: '所属应用', align: 'center', width: 300 },
		{ field: 'remarks', title: '备注', align: 'center', showOverflow: true, minWidth: 250 },
	],
	roleVisible: false,
	dailogTitle: '添加到角色',
	dailogWidth: '80%',
	name: '',
});
//------------------定义调用方法-------------------------
const emit = defineEmits(['searchTypeBtn']);
function searchTypeChange(value) {
	onRoleQuery();
	emit('searchTypeBtn', value);
	setTimeout(() => {
		// state.userChecked = []
		roleListTable.value.clearCheckboxRow();
		roleListTable.value.clearCheckboxReserve();
	}, 50);
}
const onRoleQuery = () => {
	if (!props.id) {
		return;
	}
	roleListTable.value.query(state.queryRoleParam);
};
function getCheckedRoleIds() {
	const checkedList = roleListTable.value.getAllCheckboxRecords();
	if (checkedList) {
		if (checkedList.length <= 0) {
			$messageBox.warning('请先勾选需要授权的角色', '提示');
			return false;
		}
	} else {
		$messageBox.warning('请先勾选需要授权的角色', '提示');
		return false;
	}
	let roleIds: String = [];
	checkedList.forEach((item: any) => {
		roleIds.push(item.roleId);
	});
	return roleIds;
}
const add = () => {
	if (!props.id) {
		if (props.type === 'router') {
			$messageBox.warning('请先传入路由id', '提示');
			return false;
		} else if (props.type === 'org') {
			$messageBox.warning('请先传入组织id', '提示');
			return false;
		} else if (props.type === 'user') {
			$messageBox.warning('请先传入用户id', '提示');
			return false;
		}
	}
	//保存组织授权
	const roleIds = getCheckedRoleIds();
	if (!roleIds || roleIds.length <= 0) {
		$messageBox.warning('请先传勾选角色信息', '提示');
		return false;
	}
	let params = { roleIds: roleIds };
	let funcCode = '';
	if (props.type === 'user') {
		params.userId = props.id;
		funcCode = 'user0035';
	}
	$api.common.send
		.post(funcCode, params)
		.then(() => {
			$messageBox.success('关联成功', '成功提示');
			onRoleQuery();
		})
		.catch(() => {});
};
const del = () => {
	if (!props.id) {
		if (props.type === 'router') {
			$messageBox.warning('请先传入路由id', '提示');
			return false;
		} else if (props.type === 'org') {
			$messageBox.warning('请先传入组织id', '提示');
			return false;
		} else if (props.type === 'user') {
			$messageBox.warning('请先传入用户id', '提示');
			return false;
		}
	}
	//解除组织授权
	const roleIds = getCheckedRoleIds();
	if (!roleIds || roleIds.length <= 0) {
		$messageBox.warning('请先传勾选角色信息', '提示');
		return false;
	}
	let params = { roleIds: roleIds };
	let funcCode = '';
	if (props.type === 'user') {
		params.userId = props.id;
		funcCode = 'user0036';
	}
	$api.common.send
		.post(funcCode, params)
		.then(() => {
			$messageBox.success('取消关联成功', '成功提示');
			onRoleQuery();
		})
		.catch(() => {});
};
//------------------初始化------------------------------
onMounted(() => {
	if (props.type === 'router') {
		state.funcCode = 'router0024';
		state.name = '路由';
	}
	if (props.type === 'org') {
		state.funcCode = 'org0013';
		state.name = '组织';
	}
	if (props.type === 'user') {
		state.funcCode = 'user0034';
		state.name = '用户';
	}
	if (props.type === 'menu') {
		state.funcCode = 'appmenu0013';
		state.name = '手机路由';
	}
	if (props.id) {
		state.queryRoleParam[props.type + 'Id'] = props.id;
	}
	nextTick(() => {
		onRoleQuery();
	});
});

// 初始化数据
const params = {
	dictFields: 'roleType',
};
$api.common.getBatchDict.post(params).then((res) => {
	state.dictData = res.result;
});
//--------------------监听变动数据-----------------------------
watch(
	() => props.id,
	(id) => {
		if (id) {
			state.queryRoleParam[props.type + 'Id'] = id;
		}
	}
);
//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({
	onRoleQuery,
	getCheckedRoleIds,
	add,
	del,
});
</script>
<style lang="scss" scoped></style>
